<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳跃的课工厂</title>
    <style type="text/css">

        *{
            margin: 0;
            padding:0;
        }

        .container{

            width: 600px;
            height:600px;
            border: 1px gray solid;
            margin: 50px auto;
            transform-style: preserve-3d;
            perspective: 1200px;
        }

        .ke{

            width: 300px;
            height:437px;
            display: block;
            margin: 50px auto;
            background: url(img/ke.jpg) 0px 0px /300px 437px no-repeat;
            box-shadow: -7px 10px 10px #333;
            transform:rotateX(60deg)  rotateY(3deg)  rotateZ(-10deg);
            transition: all 1s ease-out;/*所有的元素过渡,花费1s,慢速结束*/
        }


        /*添加事件*/

        .ke:hover{

            /* 在x,y,z方向上旋转为0度*/
            transform: rotate3D(0,0,0,0deg);

            box-shadow: -100px 100px 10px #fff;

        }





    </style>
</head>
<body>

<div class="container"><a class="ke" href=""></a>

</div>



</body>
</html>